<template>
	<div class="wrapper">
			  <swiper :options="swiperOption" v-if='showSwiper'>
    <swiper-slide v-for="item of List" :key="item.id">
    	<div>
    		<img :src="item.imgUrl"	class="swiper-img">
    	</div>
    </swiper-slide>

   <div class="swiper-pagination"  slot="pagination"></div>
    
  </swiper> 
	</div>

</template>

<script >
export default	{
	name:'HomeSwiper',
	props: {
		List: Array
	},
	data (){
		return{
			swiperOption:{
				pagination:'.swiper-pagination',
				loop:'true'
			}			
		}
	},
	computed:{
		showSwiper(){
			return this.List.length
		}
	}
}
</script>

<style lang="stylus" scoped>
	.wrapper	>>>	.swiper-pagination-bullet-active
			background:#fff	!important
	.wrapper
		overflow:hidden
		width:	100%
		/*height:0*/
		paddimg-bottom:	31.25%
		background:	#eee
		
		.swiper-img
			width:100%
</style>